<template>
    <div template>
        <bases :tonextlink="tonextlink" title="selects选择器">
            <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
            <u-button @click="show = !show">select单列打开</u-button>
            <u-select v-model="show2" mode="mutil-column-auto" :list="list2" @confirm="confirm2"></u-select>
            <u-button @click="show2 = !show2">select多列联动打开</u-button>
        </bases>
    </div>
</template>

<script>
import bases from './base.vue'
export default {
    props: ['tonextlink'],
    components: {
        bases
    },
    data() {
        return {
            show: false,
            show2: false,
            list: [
                {
                    value: '1',
                    label: '江'
                },
                {
                    value: '2',
                    label: '湖'
                }
            ],
            list2: [
                {
                    value: 1,
                    label: '中国',
                    children: [
                        {
                            value: 2,
                            label: '广东',
                            children: [
                                {
                                    value: 3,
                                    label: '深圳'
                                },
                                {
                                    value: 4,
                                    label: '广州'
                                }
                            ]
                        },
                        {
                            value: 5,
                            label: '广西',
                            children: [
                                {
                                    value: 6,
                                    label: '南宁'
                                },
                                {
                                    value: 7,
                                    label: '桂林'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 8,
                    label: '美国',
                    children: [
                        {
                            value: 9,
                            label: '纽约',
                            children: [
                                {
                                    value: 10,
                                    label: '皇后街区'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        change(e) {
            console.log(e);
        }
    }
}
</script>
